<ng-template *ngIf="!column.editable || fieldEditDenied" [ngTemplateOutlet]="cellViewTemp"></ng-template>

<ng-container *ngIf="column.editable && !fieldEditDenied">
  <div *ngIf="!isCellEdit && column.extraOptions?.editableTip === 'btn'" class="cell-container">
    <div class="cell-container-inner not-break modify-holder">
      <ng-template [ngTemplateOutlet]="cellViewTemp"></ng-template>
      <span class="cell-modify" (click)="cellEditing($event)">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16px" height="16px" version="1.1">
          <g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
            <path
              d="M 9.48528 3.41421 L 10.8995 2 L 13.7279 4.82843 L 12.3137 6.24264 L 9.48528 3.41421 Z M 5.24264 13.3137 L 2.41421 13.3137 L 2.41421 10.4853 L 8.77817 4.12132 L 11.6066 6.94975 L 5.24264 13.3137 Z"
            />
          </g>
        </svg>
      </span>
    </div>
  </div>
  <div *ngIf="!isCellEdit && column.extraOptions?.editableTip !== 'btn'" class="cell-editable" (click)="cellEditing($event)">
    <ng-template [ngTemplateOutlet]="cellViewTemp"></ng-template>
  </div>
  <div [ngClass]="{ 'edit-padding-fix': dynamicEditorActive }">
    <ng-template dEditorHost></ng-template>
  </div>
  <ng-template
    *ngIf="templateEditorActive"
    [ngTemplateOutlet]="column.cellEditCmp ? column.cellEditCmp.template : column.fieldType === 'date' ? dateEditTempate : textEditTempate"
    [ngTemplateOutletContext]="{
      rowIndex: rowIndex,
      colIndex: colIndex,
      column: column,
      rowItem: rowItem,
      $implicit: this,
      row: rowComponent
    }"
  >
  </ng-template>
</ng-container>

<ng-template #cellViewTemp>
  <ng-container *ngIf="column.nestedColumn">
    <span *ngIf="tableLevel > 0" class="cell-placeholder" [ngStyle]="{ width: tableLevel * column.nestedColumnIndent + 'px' }"></span>
    <span [style.visibility]="rowItem.children ? 'visible' : 'hidden'" class="childtable-toggler" (click)="toggleChildTable(rowItem)">
      <ng-container *ngIf="rowItem['$isChildTableOpen']">
        <svg
          *ngIf="!column.extraOptions?.iconFoldTable"
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          class="svg-icon svg-icon-close"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <rect x="0.5" y="0.5" width="15" height="15" rx="2"></rect>
            <rect x="4" y="7" width="8" height="2"></rect>
          </g>
        </svg>

        <span *ngIf="column.extraOptions?.iconFoldTable" [innerHTML]="column.extraOptions?.iconFoldTable | safe: 'html'"></span>
      </ng-container>
      <ng-container *ngIf="!rowItem['$isChildTableOpen']">
        <svg
          *ngIf="!column.extraOptions?.iconUnFoldTable"
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          class="svg-icon svg-icon-open-folder"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <rect x="0.5" y="0.5" width="15" height="15" rx="2"></rect>
            <path
              d="M8.75,4 L8.75,7.25 L12,7.25 L12,8.75 L8.749,8.75 L8.75,12 L7.25,12 L7.249,8.75 L4,8.75 L4,7.25 L7.25,7.25 L7.25,4 L8.75,4 Z"
            ></path>
          </g>
        </svg>
        <span *ngIf="column.extraOptions?.iconUnFoldTable" [innerHTML]="column.extraOptions?.iconUnFoldTable | safe: 'html'"></span>
      </ng-container>
    </span>
  </ng-container>
  <ng-template
    [ngTemplateOutlet]="column.cellCmp ? column.cellCmp.template : textViewTemplate"
    [ngTemplateOutletContext]="{
      rowIndex: rowIndex,
      colIndex: colIndex,
      column: column,
      rowItem: rowItem,
      cellItem: rowItem[column.field],
      cellValue: rowItem | disPlayCellValuePipe: rowIndex:column,
      $implicit: this,
      row: rowComponent,
      tableLevel: tableLevel
    }"
  >
  </ng-template>
</ng-template>

<ng-template let-cellValue="cellValue" #textViewTemplate>
  <span [attr.title]="cellValue">{{ cellValue }}</span>
</ng-template>

<ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cell="" #textEditTempate>
  <form class="form-inline edit-padding-fix">
    <div class="form-group full-width">
      <div class="input-group full-width">
        <input
          [dAutoFocus]="cell && cell.isCellEdit"
          [type]="column.fieldType"
          class="devui-form-control"
          [name]="column.field"
          [(ngModel)]="rowItem[column.field]"
          [attr.maxlength]="column.extraOptions?.maxlength"
          [attr.minlength]="column.extraOptions?.minlength"
          [attr.pattern]="column.extraOptions?.pattern"
          (keydown.enter)="cell && cell.finishCellEdit($event)"
          [placeholder]="column.placeholder || ''"
        />
      </div>
    </div>
  </form>
</ng-template>

<ng-template let-rowIndex="rowIndex" let-colIndex="colIndex" let-rowItem="rowItem" let-column="column" let-cell="" #dateEditTempate>
  <form class="form-inline edit-padding-fix">
    <div class="devui-form-group">
      <div class="devui-input-group devui-dropdown-origin">
        <input
          class="devui-form-control search"
          [name]="column.field"
          [(ngModel)]="rowItem[column.field]"
          dDatepicker
          appendToBody
          [dateFormat]="column.extraOptions?.dateFormat"
          #datePicker="datepicker"
          (ngModelChange)="!column.extraOptions?.showTime && cell && cell.finishCellEdit()"
          [maxDate]="column.extraOptions?.maxDate"
          [minDate]="column.extraOptions?.minDate"
          [cssClass]="column.extraOptions?.cssClass"
          [dateConfig]="column.extraOptions?.dateConfig"
          [locale]="column.extraOptions?.locale"
          [customViewTemplate]="column.extraOptions?.customViewTemplate"
          [disabled]="column.extraOptions?.disabled"
          [placeholder]="column.placeholder || ''"
          [autoOpen]="true"
          [showTime]="column.extraOptions?.showTime"
        />
        <div class="devui-input-group-addon" (click)="datePicker.toggle()">
          <i class="icon icon-calendar"></i>
        </div>
      </div>
    </div>
  </form>
</ng-template>
